<template>
<div id="projectimported">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">项目导入看板</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
    <el-row style="margin-bottom: 20px;background: #fff;padding: 20px 0;text-align: center;">
        <el-radio-group v-model="radio" class="flexBox">
            <el-radio :label="3" class="flexEl el">
                集团
            </el-radio>
            <el-radio :label="6" class="flexEl">
                <el-select :disabled="radio !== 6" style="width: 80%;" v-model="selectedGroup" placeholder="请选择事业群" clearable filterable>
                    <el-option v-for="item in group_selector" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-radio>
            <el-radio :label="9" class="flexEl">
                <el-select :disabled="radio !== 9" style="width: 80%;" v-model="selectedDept" placeholder="请选择事业部" clearable filterable>
                    <el-option v-for="item in dept_selector" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-radio>
        </el-radio-group>
    </el-row>
    <el-tabs v-model="activeTag" @tab-click="handleClickT">      
        <el-tab-pane label="导入汇总" name="first">
            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="6">    
                    <LabelGrid :label_info="label_active_proj.total" :label_data="getNum(label_active_proj_data.total_count)"></LabelGrid>          
                </el-col>
                <el-col :xs="24" :sm="24" :lg="6">
                    <el-tooltip content="符合条件" placement="bottom" effect="light">    
                        <LabelGrid :label_info="label_active_proj.plan_imported_count" :label_data="getNum(label_active_proj_data.plan_imported_count)"></LabelGrid>          
                    </el-tooltip>
                </el-col> 
                <el-col :xs="24" :sm="24" :lg="6">      
                    <LabelGrid :label_info="label_active_proj.active" :label_data="getNum(label_active_proj_data.import_count)"></LabelGrid>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="6">
                    <el-tooltip content="符合条件(未结项)" placement="bottom" effect="light">
                        <div style="cursor: pointer;" @click="dialog">
                            <LabelGrid :label_info="label_active_proj.no_imported" :label_data="getNum(label_active_proj_data.no_imported_plan_count)"></LabelGrid>
                        </div>
                    </el-tooltip>
                </el-col>
                <!--<el-col :xs="24" :sm="24" :lg="6">    
                    <LabelGrid :label_info="label_active_proj.plan_imported_cover_rate" :label_data="getPrecent(label_active_proj_data.plan_imported_cover_rate)"></LabelGrid>          
                </el-col>  -->                            
             
            </el-row>
            <el-row :gutter="30">
                <!--<el-col :xs="24" :sm="24" :lg="6">      
                    <LabelGrid :label_info="label_active_proj.plan_imported_current_year" :label_data="label_active_proj_data.plan_imported_current_year"></LabelGrid>
                </el-col>-->
                <el-col :xs="24" :sm="24" :lg="6">  
                    <el-tooltip content="符合条件" placement="bottom" effect="light">   
                        <LabelGrid :label_info="label_active_proj.yearRate" :label_data="getPrecent(label_active_proj_data.plan_imported_cover_rate)"></LabelGrid>          
                    </el-tooltip>
                </el-col> 
                <el-col :xs="24" :sm="24" :lg="6">                     
                    <LabelGrid :label_info="label_active_proj.yearCre" :label_data="getNum(label_active_proj_data.current_year_imported_count)"></LabelGrid>                             
                </el-col>                                                        
                <!--<el-col :xs="24" :sm="24" :lg="6">    
                    <LabelGrid :label_info="label_active_proj.monthCre" :label_data="getNum(label_active_proj_data.current_month_imported_count)"></LabelGrid>          
                </el-col>  -->                       
            </el-row>

            <el-row :gutter="30" v-if="radio != 9" class="marT" style="margin-bottom: 20px;">
                <el-col :xs="24" :sm="24" :lg="12">
                    <ve-bar
                        style="background: #fff;padding-top: 20px;"
                        v-if="activeTag == 'first'"                        
                        :data="coverRate"
                        :settings="list.configSettings"                       
                        ref="cbar0"
                        >
                    </ve-bar>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                    <ve-bar
                        style="background: #fff;padding-top: 20px;"
                        v-if="activeTag == 'first'"                        
                        :data="importCoverRate"
                        :settings="list.projectSettings"                       
                        ref="cbar1"
                        >
                    </ve-bar>
                </el-col>
            </el-row>

            <el-tabs v-model="allActiveName" type="border-card">
                <el-tab-pane label="项目导入趋势" name="0">
                    <el-row>
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line                              
                                ref="abar0"
                                :data="imported_trend"
                                :settings="settings"
                                :dataZoom="dataZoom"
                                :data-empty="iLineEmpty"
                                :loading="iLineLoading">
                            </ve-line>
                        </el-col>     
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="已导入项目(本年度)" name="1">
                    <el-row>
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line                               
                                ref="abar1"
                                :data="year_imported_trend"
                                :settings="list.configSettings"
                                :dataZoom="dataZoom"
                                :data-empty="yiLineEmpty"
                                :loading="yiLineLoading">
                            </ve-line>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="项目覆盖导入趋势" name="2">
                    <el-row>
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line                              
                                ref="abar2"
                                :data="cover_rate_trend"
                                :settings="settings"
                                :dataZoom="dataZoom"
                                :data-empty="ciLineEmpty"
                                :loading="ciLineLoading">
                            </ve-line>
                        </el-col>
                    </el-row>
                </el-tab-pane>                
            </el-tabs>                          

            <el-card class="marT box-card m-b" style="margin-bottom: 20px;" shadow="never">
                <div slot="header" class="clearfix">
                    <div style="float: left; padding: 10px 0">项目导入详情</div>
                    <el-radio-group @change="radioChange" v-model="selected" style="float: right; padding: 3px 0" size="mini">
                        <el-radio-button label="按年度"></el-radio-button>
                        <el-radio-button label="按月份"></el-radio-button>
                    </el-radio-group>                 
                </div>
                <div v-if="selected == '按年度'">
                    <VTable	
                        :isShow="false"
                        :border="true"												
                        :tablesize="allSize"
                        :tablecurrent="allCurrent"
                        :tabletotal="allTotal"
                        :table-data="imported_details"
                        :table-label="imported_details_table"					                        
                        @tableSizeChange="allSizeChange"
                        @tableCurrentImportDeptChange="allCurrentChange"
                    >
                    </VTable>
                </div>
                <div v-else>
                    <VTable	
                        :isShow="false"
                        :border="true"												
                        :tablesize="allSize"
                        :tablecurrent="allCurrent"
                        :tabletotal="allTotal"
                        :table-data="imported_details"
                        :table-label="imported_details_month_table"					                        
                        @tableSizeChange="allSizeChange"
                        @tableCurrentImportDeptChange="allCurrentChange"
                    >
                    </VTable>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane :lazy="true" label="DEVOPS系统导入" name="second">
            <el-row :gutter="30">       
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_active_proj.config" :label_data="label_active_proj_data.config_count"></LabelGrid>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_active_proj.project" :label_data="label_active_proj_data.project_manage_count"></LabelGrid>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_active_proj.period" :label_data="label_active_proj_data.period_count"></LabelGrid>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_active_proj.customer" :label_data="label_active_proj_data.customer_count"></LabelGrid>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_active_proj.autotest" :label_data="label_active_proj_data.autotest_count"></LabelGrid>
                </el-col>      
            </el-row>

            <el-row style="margin-bottom: 20px;" v-if="!(dataEmpty1 && dataEmpty2 && dataEmpty3 && dataEmpty4 && dataEmpty5)">
                <el-col :xs="24" :sm="24" :lg="24">
                    <el-tabs v-model="activeName" ref="tabs" type="border-card" @tab-click="handleClick">
                        <el-tab-pane label="配置管理" name="0">
                            <ve-bar 
                                v-if="activeTag == 'second'"                       
                                :data="list.config_rank"
                                :settings="list.configSettings"
                                :loading="loading"
                                :dataEmpty="dataEmpty1"
                                ref="vbar0"
                                >
                            </ve-bar>
                        </el-tab-pane>
                        <el-tab-pane label="项目管理系统" name="1">
                            <ve-bar                        
                                :data="list.project_manage_rank"
                                :settings="list.projectSettings"
                                :loading="loading"
                                :dataEmpty="dataEmpty2"
                                ref="vbar1"
                                >
                            </ve-bar>
                        </el-tab-pane>
                        <el-tab-pane label="阶段点管理系统" name="2">
                            <ve-bar                        
                                :data="list.period_rank"
                                :settings="list.periodSettings"
                                :loading="loading"
                                :dataEmpty="dataEmpty3"
                                ref="vbar2"
                                >
                            </ve-bar>
                        </el-tab-pane>
                        <el-tab-pane label="客户投诉系统" name="3">
                            <ve-bar                        
                                :data="list.customer_rank"
                                :settings="list.customerSettings"
                                :loading="loading"
                                :dataEmpty="dataEmpty4"
                                ref="vbar3"
                                >
                            </ve-bar>                    
                        </el-tab-pane>
                        <el-tab-pane label="自动化测试系统" name="4">
                            <ve-bar                        
                                :data="list.autotest_rank"
                                :settings="list.autotestSettings"
                                :loading="loading"
                                :dataEmpty="dataEmpty5"
                                ref="vbar4"
                                >
                            </ve-bar>                   
                        </el-tab-pane>
                    </el-tabs>
                    
                </el-col>
            </el-row>
            
            <el-card class="marT box-card m-b" style="margin-bottom: 20px;" shadow="never">
                <div slot="header" class="clearfix">
                    <div style="float: left; padding: 10px 0">devops系统新增导入趋势</div>
                    <el-radio-group @change="devopsRadioChange" v-model="devopsSelected" style="float: right; padding: 3px 0" size="mini">
                        <el-radio-button label="按年度"></el-radio-button>
                        <el-radio-button label="按月份"></el-radio-button>
                    </el-radio-group> 
                    <el-radio-group @change="sumChange" v-model="sumRadio" style="float: right; padding: 3px 10px" size="mini">
                        <el-radio-button :label="3">累加</el-radio-button>
                        <el-radio-button :label="6">不累加</el-radio-button>                        
                    </el-radio-group>                
                </div>

                <div key="year" v-if="devopsSelected == '按年度'">
                    <el-row>
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line
                                ref="year" 
                                :data="devops_year_trend"
                                :settings="settings"                                
                                :data-empty="devopsLineEmpty"
                                :loading="devopsLineLoading"
                                :data-zoom="dataZoom">
                            </ve-line>                           
                        </el-col>
                    </el-row>
                </div>

                <div key="month" v-else>
                    <el-row>
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line
                                ref="month" 
                                :data="devops_month_trend"
                                :settings="settings"                                
                                :data-empty="devopsLineEmpty"
                                :loading="devopsLineLoading"
                                :data-zoom="dataZoom">
                            </ve-line>                             
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card class="box-card m-b" style="margin-bottom: 20px;" shadow="never">
                <div slot="header" class="clearfix">
                    <div style="float: left; padding: 10px 0">devops系统导入汇总</div>                                    
                </div>
                <div>
                    <el-table
                        :data="devopsTable.slice((devopsCurrent-1)*devopsSize, devopsCurrent*devopsSize)"
                        :header-cell-style="{background:'#eef1f6'}"                                                                    
                        style="width: 100%"
                        :border="true">
                        <el-table-column 
                            prop="date" 
                            label="日期" 
                            width="100"
                            align="center">
                        </el-table-column>

                        <el-table-column                             
                            label="持续集成系统" 
                            align="center">
                            <el-table-column
                                prop="devops_total_counts"
                                :formatter="formatter" 
                                align="center" 
                                label="所有">
                            </el-table-column>

                            <el-table-column
                                prop="devops_new_counts"
                                :formatter="formatter"  
                                align="center"
                                label="新增">
                            </el-table-column>
                        </el-table-column>

                        <el-table-column 
                            prop="gerrit_new_counts" 
                            label="代码管理系统"  
                            :formatter="formatter"                             
                            align="center">
                        </el-table-column>

                        <el-table-column 
                            prop="pms_new_counts" 
                            label="项目管理系统"  
                            :formatter="formatter"                             
                            align="center">
                        </el-table-column>

                        <el-table-column 
                            prop="period_new_counts" 
                            label="阶段点评审系统"
                            :formatter="formatter"                               
                            align="center">
                        </el-table-column>

                        <el-table-column 
                            prop="customer_new_counts" 
                            label="客户投诉系统"
                            :formatter="formatter"                               
                            align="center">
                        </el-table-column>

                        <el-table-column 
                            prop="autotest_new_counts" 
                            label="自动化测试管理系统"
                            :formatter="formatter"                               
                            align="center">
                        </el-table-column>

                        <el-table-column                             
                            prop="knowledge_community_counts" 
                            label="知识社区"
                            :formatter="formatter"                             
                            align="center">
                        </el-table-column>
                    </el-table>
                    <el-pagination class="marT"
                        v-show="devopsTotal > 10"
                        :page-size="devopsSize"                                                      
                        @size-change="devopsSizeChange"
                        @current-change="devopsCurrentChange"
                        :current-page="devopsCurrent"                               
                        layout="prev, pager, next"
                        style="text-align: center"
                        :total="devopsTotal">
                    </el-pagination>
                </div>
            </el-card>

            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <DataTable :table_id="tableinfo_project_imported.id" :table_title="tableinfo_project_imported.title" :columns="tableinfo_project_imported.columns" 
                        :table_data='tableinfo_project_imported.table_data' :columns_key="tableinfo_project_imported.columns_key" :columnDefs="tableinfo_project_imported.columnDefs"
                        >  <!-- :group_selector="group_selector" :dept_selector="dept_selector" :sys_selector="sys_selector" -->
                    </DataTable> 
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
        
    <el-dialog width="80%" :visible.sync="dialogTableVisible">
        <el-table 
            border
            :data="dialogTable.slice((dialogCurrent-1)*dialogSize, dialogCurrent*dialogSize)"
            :header-cell-style="{background:'#eef1f6'}"
            style="width: 100%">
            <el-table-column align="center" prop="project_name" label="项目名称">

            </el-table-column>
            <el-table-column align="center" prop="group_name" label="所属事业群">
            </el-table-column>
            <el-table-column align="center" prop="dept_name" label="所属事业部">
            </el-table-column>
            <el-table-column align="center" prop="product_manager" label="PM">
            </el-table-column>
            <el-table-column align="center" prop="start_date" label="项目开始时间">
            </el-table-column>
            <el-table-column align="center" prop="end_date" label="项目结束时间">
            </el-table-column>
        </el-table>
        <el-pagination
            v-show="dialogTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top:15px;text-align: center;"
            small
            layout="prev, pager, next"
            :total="dialogTotal">
        </el-pagination>
    </el-dialog>
</div>   
</template>
<script>
import DataTable from '@/components/qa/DataTable.vue';
import LabelGrid from '@/components/qa/Label.vue';
import VChart from '@/components/charts/index' 
import VTable from '@/components/charts/table'
import { getHeader } from '@/app.config'
import { getToken, getName, removeToken, removeName } from '@/utils/auth'
export default {
    name: 'ProjectImported',
    components: {
        DataTable,
        LabelGrid,
        VChart,
        VTable
    },
    data () {
        return {           
            user: JSON.parse(localStorage.getItem('user')),
            token: getToken(),
            name: getName(),
            allType: 'year',
            allSize: 10,
            allCurrent: 1,
            allTotal: 0,
            devopsSize: 10,
            devopsCurrent: 1,
            devopsTotal: 0,
            allActiveName: '0',
            devopsTable: [], 
            sumRadio: 3,  
            devopsAllLine: {},         
            imported_details: [],
            imported_details_table: [
                {
					label: '日期',
					param: 'date',
					align: 'center'
				},
                {
					label: '所有项目',
					param: 'total_count',
					align: 'center',
                    render: (row) => {
                        if(row.total_count) {
                            return row.total_count + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '新增项目',
					param: 'new_project',
					align: 'center',
                    render: (row) => {
                        if(row.new_project) {
                            return row.new_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '计划导入项目(符合条件)',
					param: 'plan_imported_project',
					align: 'center',
                    render: (row) => {
                        if(row.plan_imported_project) {
                            return row.plan_imported_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '已导入项目(符合条件)',
					param: 'imported_project',
					align: 'center',
                    render: (row) => {
                        if(row.imported_project) {
                            return row.imported_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '未导入项目(符合条件)',
					param: 'no_imported_project',
					align: 'center',
                    render: (row) => {
                        if(row.no_imported_project) {
                            return row.no_imported_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '导入覆盖率',
					param: 'imported_cover_rate',
					align: 'center',
                    render: (row) => {
                        if(row.imported_cover_rate) {
                            return Number(row.imported_cover_rate*100).toFixed(2) + '%'
                        } else {
                            return `0.00%`
                        }						
					}
				},
                {
					label: '已导入项目(本年度)',
					param: 'year_imported_count',
					align: 'center',
                    render: (row) => {
                        if(row.year_imported_count) {
                            return row.year_imported_count + '个'
                        } else {
                            return 0
                        }						
					}
				}
            ],
            imported_details_month_table: [
                {
					label: '日期',
					param: 'date',
					align: 'center'
				},
                {
					label: '所有项目',
					param: 'total_count',
					align: 'center',
                    render: (row) => {
                        if(row.total_count) {
                            return row.total_count + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '新增项目',
					param: 'new_project',
					align: 'center',
                    render: (row) => {
                        if(row.new_project) {
                            return row.new_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '计划导入项目(符合条件)',
					param: 'plan_imported_project',
					align: 'center',
                    render: (row) => {
                        if(row.plan_imported_project) {
                            return row.plan_imported_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '已导入项目(符合条件)',
					param: 'imported_project',
					align: 'center',
                    render: (row) => {
                        if(row.imported_project) {
                            return row.imported_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '未导入项目(符合条件)',
					param: 'no_imported_project',
					align: 'center',
                    render: (row) => {
                        if(row.no_imported_project) {
                            return row.no_imported_project + '个'
                        } else {
                            return 0
                        }						
					}
				},
                {
					label: '导入覆盖率',
					param: 'imported_cover_rate',
					align: 'center',
                    render: (row) => {
                        if(row.imported_cover_rate) {
                            return Number(row.imported_cover_rate*100).toFixed(2) + '%'
                        } else {
                            return `0.00%`
                        }						
					}
				},                
                {
					label: '已导入项目(本月)',
					param: 'month_imported_count',
					align: 'center',
                    render: (row) => {
                        if(row.month_imported_count) {
                            return row.month_imported_count + '个'
                        } else {
                            return 0
                        }						
					}
				}
            ],
            dialogTable: [],
            dialogTableVisible: false,
            dialogCurrent: 1,
            dialogSize: 10,
            dialogTotal: 0,
            activeTag: 'first',
            label_active_proj: {
                config: {
                    label_hname: '配置管理',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',                   
                },
                total: {
                    label_hname: '所有项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',                   
                },
                project: {
                    label_hname: '项目管理系统',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                period: {
                    label_hname: '阶段点管理系统',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                customer: {
                    label_hname: '客户投诉系统',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                autotest: {
                    label_hname: '自动化测试系统',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                active: {
                    label_hname: '已导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                yearCre: {
                    label_hname: '已导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '本年度',
                    label_class: 'success',
                },
                monthCre: {
                   label_hname: '已导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '本月',
                    label_class: 'success', 
                },
                yearRate: {
                    label_hname: '导入覆盖率',
                    label_sname: '总计',
                    label_unit: '(%)',
                    label_header: '所有',
                    label_class: 'success',
                },             
                plan_imported_count: {
                    label_hname: '计划导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                plan_imported_cover_rate: {
                    label_hname: '导入覆盖率',
                    label_sname: '总计',
                    label_unit: '(%)',
                    label_header: '所有',
                    label_class: 'success',
                },
                plan_imported_current_unfinished: {
                    label_hname: '未导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                plan_imported_current_year: {
                    label_hname: '计划导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '本年度',
                    label_class: 'success',
                },
                yearNo: {
                    label_hname: '当年未结项项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'success',
                },
                no_imported: {
                    label_hname: '未导入项目',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_header: '所有',
                    label_class: 'danger',
                },

            },
            dataZoom: [{
                type: 'slider',
                start: 0,
                end: 100
            }],
            selected: '按年度',
            devopsSelected: '按年度',
            radio: 3,
            loading: false,
            dataEmpty1: false,
            dataEmpty2: false,
            dataEmpty3: false,
            dataEmpty4: false,
            dataEmpty5: false,
            devopsLineEmpty: false,
            devopsLineLoading: false,
            iLineEmpty: false,
            iLineLoading: false,
            yiLineEmpty: false,
            yiLineLoading: false,
            ciLineEmpty: false,
            ciLineLoading: false,
            devops_year_trend: {
                columns: ['date', 'devops_new_counts', 'gerrit_new_counts', 'pms_new_counts', 'period_new_counts', 'customer_new_counts', 'autotest_new_counts', 'knowledge_community_counts'],
                rows: []
            },
            devops_month_trend: {
                columns: ['date', 'devops_new_counts', 'gerrit_new_counts', 'pms_new_counts', 'period_new_counts', 'customer_new_counts', 'autotest_new_counts', 'knowledge_community_counts'],
                rows: []
            },
            imported_trend: {
                columns: ['date', 'count'],
                rows: []
            },
            year_imported_trend: {
                columns: ['date', 'year_imported_count'],
                rows: []
            },
            cover_rate_trend: {
                columns: ['date', 'cover_rate'],
                rows: []
            },
            coverRate: {
                columns: ['name', 'cover_rate'],
                rows: []
            },
            importCoverRate: {
                columns: ['name', 'cover_rate'],
                rows: []
            },
            settings: {
                labelMap: {
                    count: '已导入项目(符合条件)',                    
                    cover_rate: '导入覆盖率(%)',
                    devops_new_counts: '持续集成系统(个)',
                    pms_new_counts: '项目管理系统(个)',
                    gerrit_new_counts: '代码管理系统(个)',
                    period_new_counts: '阶段点评审系统(个)',
                    customer_new_counts: '客户投诉系统(个)',
                    autotest_new_counts: '自动化测试管理系统(个)',
                    knowledge_community_counts: '知识社区(个)'
                }
            },
            activeName: '0',
            list: {               
                config_rank: {
                    columns: ['name', 'counts'],
                    rows: []
                },
                configSettings: {
                    labelMap: {
                        counts: '配置管理排名',
                        year_imported_count: '已导入项目(本年度)',
                        cover_rate: '所有覆盖率排名(%)'
                    }
                },                             
                project_manage_rank: { //
                    columns: ['name', 'counts'],
                    rows: []
                },
                projectSettings: {
                    labelMap: {
                        counts: '项目管理排名',
                        cover_rate: '符合条件已导入覆盖率排名(%)'
                    }
                },      
                period_rank: { //
                    columns: ['name', 'counts'],
                    rows: []
                },
                periodSettings: {
                    labelMap: {
                        counts: '阶段点评审排名'
                    }
                },        
                customer_rank: { //
                    columns: ['name', 'counts'],
                    rows: []
                },
                customerSettings: {
                    labelMap: {
                        counts: '客户投诉排名'
                    }
                },    
                autotest_rank: { //
                    columns: ['name', 'counts'],
                    rows: []
                },
                autotestSettings: {
                    labelMap: {
                        counts: '自动化测试排名'
                    }
                }               
            },       
            selectedGroup: '',
            selectedDept: '',
            // selectedSys: '',
            label_active_proj_data: {},
            group_selector: [],
            dept_selector: [],
            tableinfo_project_imported: {
                id: 'table_project_imported',
                title: '项目导入详情',
                columns: ['项目名称','Gerrit导入', 'Bug系统导入', '阶段点评审数据导入', '需求数据导入', '客户投诉数据导入', '测试质量数据导入'],
                table_data: [],
                columns_key: [
                    {data: 'p_projname'},
                    {data: 'p_gerrit_active', width: '',
                    // eslint_disable-next-line
                    render: function( data, type, row, meta) {
                        var str = data;
                        var project_id = row.p_projid;
                        if (str) {
                            return '<a href="#/project/'+project_id+'/qa/gerritreview'+'" class="btn btn-primary btn-circle" target="_blank"><i class="fa fa-check"></i></a>';
                        } else {
                            return '<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
                        }
                        // return '<a href="#/project/'+this.project_id +'/qa/qadetail/'+daterange+'&gerrit&'+branch+'&'+component+
                        // '" class="btn btn-sm btn-primary" target="_blank">查看详情</a>';
                        // return '<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i></button>'
                     }
                    },
                    {data: 'p_bugzilla_active', width: '',
                    // eslint_disable-next-line
                    render: function( data, type, row, meta) {
                        var str = data;
                        var project_id = row.p_projid;
                        if (str) {
                            return '<a href="#/project/'+project_id+'/qa/defectreview'+'" class="btn btn-primary btn-circle" target="_blank"><i class="fa fa-check"></i></a>';
                        } else {
                            return '<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
                        }
                        // return '<a href="#/project/'+this.project_id +'/qa/qadetail/'+daterange+'&gerrit&'+branch+'&'+component+
                        // '" class="btn btn-sm btn-primary" target="_blank">查看详情</a>';
                        // return '<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i></button>'
                     }
                    },
                    {data: 'p_period_rev_active', width: '',
                    // eslint_disable-next-line
                    render: function( data, type, row, meta) {
                        var str = data;
                        var project_id = row.p_projid;
                        if (str) {
                            return '<a href="#/project/'+project_id+'/qa/periodreview'+'" class="btn btn-primary btn-circle" target="_blank"><i class="fa fa-check"></i></a>';
                        } else {
                            return '<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
                        }
                        // return '<a href="#/project/'+this.project_id +'/qa/qadetail/'+daterange+'&gerrit&'+branch+'&'+component+
                        // '" class="btn btn-sm btn-primary" target="_blank">查看详情</a>';
                        // return '<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i></button>'
                     }
                    },
                    {data: 'p_require_imple_active', width: '',
                    // eslint_disable-next-line
                    render: function( data, type, row, meta) {
                        var str = data;
                        var project_id = row.p_projid;
                        if (str) {
                            return '<a href="#/project/'+project_id+'/qa/requireimplement'+'" class="btn btn-primary btn-circle" target="_blank"><i class="fa fa-check"></i></a>';
                        } else {
                            return '<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
                        }
                        // return '<a href="#/project/'+this.project_id +'/qa/qadetail/'+daterange+'&gerrit&'+branch+'&'+component+
                        // '" class="btn btn-sm btn-primary" target="_blank">查看详情</a>';
                        // return '<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i></button>'
                     }
                    },
                    {data: 'p_cus_complaint_active', width: '',
                    // eslint_disable-next-line
                    render: function( data, type, row, meta) {
                        var str = data;
                        var project_id = row.p_projid;
                        if (str) {
                            return '<a href="#/project/'+project_id+'/qa/customercomplaint'+'" class="btn btn-primary btn-circle" target="_blank"><i class="fa fa-check"></i></a>';
                        } else {
                            return '<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
                        }
                        // return '<a href="#/project/'+this.project_id +'/qa/qadetail/'+daterange+'&gerrit&'+branch+'&'+component+
                        // '" class="btn btn-sm btn-primary" target="_blank">查看详情</a>';
                        // return '<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i></button>'
                     }
                    },
                    {data: 'p_test_task_active', width: '',
                    // eslint_disable-next-line
                    render: function( data, type, row, meta) {
                        var str = data;
                        var project_id = row.p_projid;
                        if (str) {
                            return '<a href="#/project/'+project_id+'/valid/testplan'+'" class="btn btn-primary btn-circle" target="_blank"><i class="fa fa-check"></i></a>';
                        } else {
                            return '<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i></button>'
                        }
                        // return '<a href="#/project/'+this.project_id +'/qa/qadetail/'+daterange+'&gerrit&'+branch+'&'+component+
                        // '" class="btn btn-sm btn-primary" target="_blank">查看详情</a>';
                        // return '<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i></button>'
                     }
                    },
                ],
                columnDefs: [],
            },
        }
    },
    methods: {
        dialog() {
            this.dialogTableVisible = true
        },
        formatter(row, column, cellValue, index) {   
            let number         
            cellValue ? number = cellValue + '个' : number = 0
            return number
        },
        getPrecent(num) {
            let number            
            num ? number = (num*100).toFixed(2) + '%' : number = '0.00%'
            return number
        },
        getNum(num) {
            let number
            num ? number = num : number = 0
            return number
        },
        handleCurrentChange(val) {
            this.dialogCurrent = val
        },
        handleSizeChange(val) {
            this.dialogSize = val
        },
        allCurrentChange(val) {
            this.allCurrent = val
        },
        allSizeChange(val) {
            this.allSize = val
        },
        devopsCurrentChange(val) {
            this.devopsCurrent = val
        },
        devopsSizeChange(val) {
            this.devopsSize = val
        },
        handleClick(tab, events) {           
            this.activeName = tab.name
        },
        radioChange(val) {
            this.allCurrent = 1
            if(val == '按月份') {
                this.allType = 'month'
            } else {
                this.allType = 'year'
            }   
            if(this.radio == 3) {                
                this.getAllTableData('', '')
            } else if(this.radio == 6) {
               if(!this.selectedGroup) {
                   this.selectedGroup = this.group_selector[0].value
               }                
               this.getAllTableData(this.selectedGroup, '')
            } else {
                if(!this.selectedDept) {
                   this.selectedDept = this.dept_selector[0].value
               }                
                this.getAllTableData('', this.selectedDept)
            }         
        },
        sumChange(val) {
            if(val == 3 && this.devopsSelected == '按年度') {
                this.devops_year_trend.rows = this.devopsAllLine.asc_year_trend                
            } else if(val == 3 && this.devopsSelected == '按月份') {
                this.devops_month_trend.rows = this.devopsAllLine.asc_month_trend 
            } else if(val == 6 && this.devopsSelected == '按年度') {
                this.devops_year_trend.rows = this.devopsAllLine.year_trend
            } else {
                this.devops_month_trend.rows = this.devopsAllLine.month_trend 
            }
        },
        devopsRadioChange(val) {
            if(this.sumRadio == 3 && val == '按年度') {
                this.devops_year_trend.rows = this.devopsAllLine.asc_year_trend                
            } else if(this.sumRadio == 3 && val == '按月份') {
                this.devops_month_trend.rows = this.devopsAllLine.asc_month_trend 
            } else if(this.sumRadio == 6 && val == '按年度') {
                this.devops_year_trend.rows = this.devopsAllLine.year_trend
            } else {
                this.devops_month_trend.rows = this.devopsAllLine.month_trend 
            }
            // if(this.radio == 3) {                
            //     this.getDevopsTable('', '')
            // } else if(this.radio == 6) {
            //    if(!this.selectedGroup) {
            //        this.selectedGroup = this.group_selector[0].value
            //    }                
            //    this.getDevopsTable(this.selectedGroup, '')
            // } else {
            //     if(!this.selectedDept) {
            //        this.selectedDept = this.dept_selector[0].value
            //    }                
            //     this.getDevopsTable('', this.selectedDept)
            // } 
            if(val == '按年度') {
                this.$nextTick(() => {             
                    this.$refs[`year`].echarts.resize()
                })
            } else {
                this.$nextTick(() => {             
                    this.$refs[`month`].echarts.resize()
                })
            }
        },
        handleClickT(tab, events) {
            console.log(tab.name)            
        },
        getAllTableData(groupId, departmentId) {
            this.imported_details = []
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/getimportprojectdetail?type=${this.allType}&groupId=${groupId}&departmentId=${departmentId}`, {headers: getHeader()})
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 200) {
                        this.imported_details = res.data.data
                        if(this.imported_details) {
                            this.allTotal = this.imported_details.length
                        }
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getDevopsTable(groupId, departmentId) {
            this.devopsLineLoading = true
            this.devops_year_trend.rows = []
            this.devops_month_trend.rows = []
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/getsysimportinfo?groupId=${groupId}&departmentId=${departmentId}`, {headers: getHeader()})
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 200) {
                        this.devopsLineLoading = false
                        this.devopsAllLine = res.data
                        res.data.year_trend && res.data.year_trend.length ? this.devopsLineEmpty = false : this.devopsLineEmpty = true
                        this.devops_year_trend.rows = res.data.asc_year_trend
                        this.devops_month_trend.rows = res.data.asc_month_trend
                        this.devopsTable = res.data.month_trend
                        if(this.devopsTable) {
                            this.devopsTotal = this.devopsTable.length
                        }
                    } else {
                        this.devopsLineLoading = true
                        this.devopsLineEmpty = true
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getImportProjectInfo: function(groupId, departmentId) {
            this.loading = true
            this.iLineLoading = true
            this.yiLineLoading = true
            this.ciLineLoading = true
            // this.dataEmpty = true
            this.$axios.get(
                process.env.VUE_APP_KANBAN_HOST + 
                '/api/qa/getimportprojectconfig/?groupId='+groupId+'&departmentId='+departmentId, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if(response.data.code == 200) {
                            this.loading = false                       
                            this.tableinfo_project_imported.table_data = response.data.projectinfo
                            this.label_active_proj_data.import_count = response.data.projectinfo.length                       
                            this.label_active_proj_data.config_count = response.data.config_count
                            this.label_active_proj_data.project_manage_count = response.data.project_manage_count
                            this.label_active_proj_data.period_count = response.data.period_count
                            this.label_active_proj_data.customer_count = response.data.customer_count
                            this.label_active_proj_data.autotest_count = response.data.autotest_count
                            this.label_active_proj_data.no_imported_plan_count = response.data.no_imported_plan_count
                            this.label_active_proj_data.plan_imported_count = response.data.plan_imported_count
                            this.label_active_proj_data.plan_imported_cover_rate = response.data.plan_imported_cover_rate
                            this.label_active_proj_data.plan_imported_current_unfinished = response.data.plan_imported_current_unfinished
                            this.label_active_proj_data.plan_imported_current_year = response.data.plan_imported_current_year
                            this.label_active_proj_data.plan_imported_cover_rate = response.data.plan_imported_cover_rate
                            this.label_active_proj_data.current_year_imported_count = response.data.current_year_imported_count
                            this.label_active_proj_data.current_month_imported_count = response.data.current_month_imported_count
                            this.label_active_proj_data.total_count = response.data.total_count
                            this.dialogTable = response.data.no_imported_plan_details
                            this.dialogTotal = this.dialogTable.length

                            !response.data.config_rank.length ? this.dataEmpty1 = true : this.dataEmpty1 = false
                            !response.data.project_manage_rank.length ? this.dataEmpty2 = true : this.dataEmpty2 = false
                            !response.data.period_rank.length ? this.dataEmpty3 = true : this.dataEmpty3 = false
                            !response.data.customer_rank.length ? this.dataEmpty4 = true : this.dataEmpty4 = false
                            !response.data.autotest_rank.length ? this.dataEmpty5 = true : this.dataEmpty5 = false

                            this.list.config_rank.rows = response.data.config_rank.reverse()
                            this.list.project_manage_rank.rows = response.data.project_manage_rank.reverse()
                            this.list.period_rank.rows = response.data.period_rank.reverse()
                            this.list.customer_rank.rows = response.data.customer_rank.reverse()
                            this.list.autotest_rank.rows = response.data.autotest_rank.reverse()
                            if(response.data.cover_rate_rank) {
                                response.data.cover_rate_rank.forEach(val => {
                                    val.cover_rate = Number((val.cover_rate*100).toFixed(2))                    
                                })
                                let coverRank = response.data.cover_rate_rank
                                
                                this.coverRate.rows = coverRank.reverse()
                            }
                            if(response.data.imported_cover_rate_rank) {
                                response.data.imported_cover_rate_rank.forEach(val => {
                                    val.cover_rate = Number((val.cover_rate*100).toFixed(2))                    
                                })
                                let importCoverRank = response.data.imported_cover_rate_rank
                                
                                this.importCoverRate.rows = importCoverRank.reverse()
                            }
                            this.iLineLoading = false
                            this.yiLineLoading = false
                            this.ciLineLoading = false
                            response.data.imported_trend.length ? this.iLineEmpty = false : this.iLineEmpty = true
                            response.data.year_imported_trend.length ? this.yiLineEmpty = false : this.yiLineEmpty = true
                            if(response.data.imported_cover_rate_trend) {
                                response.data.imported_cover_rate_trend.length ? this.ciLineEmpty = false : this.ciLineEmpty = true
                                let resArr = response.data.imported_cover_rate_trend
                                resArr.forEach(val => {
                                    val.cover_rate = val.cover_rate*100
                                })
                                this.cover_rate_trend.rows = resArr
                            } else {
                                this.ciLineEmpty = true
                            }
                            this.imported_trend.rows = response.data.imported_trend
                            this.year_imported_trend.rows = response.data.year_imported_trend

                            if (this.group_selector.length === 0 || this.dept_selector.length === 0) {
                                var dept_dict = {}
                                var group_dict = {}
                                for (var index in this.tableinfo_project_imported.table_data) {
                                    var data = this.tableinfo_project_imported.table_data[index]
                                    if (data.group_id) {
                                        group_dict[data.group_id] = data.group_name
                                    }
                                    if (data.department_id) {
                                        dept_dict[data.department_id] = data.department_name
                                    }
                                }
                                for (var group in group_dict) {
                                    this.group_selector.push({
                                        label: group_dict[group],
                                        value: group
                                    })
                                }
                                for (var dept in dept_dict) {
                                    this.dept_selector.push({
                                        label: dept_dict[dept],
                                        value: dept
                                    })
                                }
                            }
                        } else if (response.data.code == 401) {
                            removeToken()
                            removeName()
                            this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                            this.$router.push({
                                path: '/#/login'
                            })
                        } else {
                            this.loading = false
                            this.iLineLoading = false
                            this.yiLineLoading = false
                            this.ciLineLoading = false
                        }
                    }                  
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
            // source.cancel('Operation canceled by the user.');
        },
    },
    watch: {
        selectedGroup (val) {
            this.getImportProjectInfo(val, '')
            this.getAllTableData(val, '')
            this.getDevopsTable(val, '')
            // this.$emit("showTableData", )
        },
        selectedDept (val) {
            this.getImportProjectInfo('', val)
            this.getAllTableData('', val)
            this.getDevopsTable('', val)
            // this.$emit("showTableData", )
        },
        radio(r) {
            if(r == 3) {
                this.getImportProjectInfo('', '')
                this.getAllTableData('', '')
                this.getDevopsTable('', '')
            } else if(r == 6) {
               if(!this.selectedGroup) {
                   this.selectedGroup = this.group_selector[0].value
               }
               this.getImportProjectInfo(this.selectedGroup, '') 
               this.getAllTableData(this.selectedGroup, '')
               this.getDevopsTable(this.selectedGroup, '')
            } else {
                if(!this.selectedDept) {
                   this.selectedDept = this.dept_selector[0].value
               }
                this.getImportProjectInfo('', this.selectedDept)
                this.getAllTableData('', this.selectedDept)
                this.getDevopsTable('', this.selectedDept)
            }
        },
        // selectedSys (val) {
        //     this.getImportProjectInfo(this.selectedGroup, this.selectedDept, val)
        //     // this.$emit("showTableData", )
        // },
        activeTag(t) {
            this.$nextTick(() => {
                if(t == 'second') {   
                    //console.log(this.$refs['vbar0'])      
                    this.$refs.vbar0.echarts.resize()
                } else {
                    if(this.radio != 9) {
                        this.$refs.cbar0.echarts.resize()
                    }
                }
            })
        },
        activeName(v) {
            this.$nextTick(() => {             
				this.$refs[`vbar${v}`].echarts.resize()
			})
        },
        allActiveName(v) {
            this.$nextTick(() => {             
				this.$refs[`abar${v}`].echarts.resize()
			})
        }
        // list: {
            // handler: function() {
            //     if(this.list.config_rank.rows.length) {
            //         this.activeName = '0'
            //     } else if(this.list.config_rank.rows.length == 0 && this.list.project_manage_rank.rows.length) {
            //         this.activeName = '1'
            //     } else if(this.list.config_rank.rows.length == 0 && this.list.project_manage_rank.rows.length == 0 && this.list.period_rank.rows.length) {
            //         this.activeName = '2'
            //     } else if(this.list.config_rank.rows.length == 0 && this.list.project_manage_rank.rows.length == 0 && this.list.period_rank.rows.length == 0 && this.list.customer_rank.rows.length) {
            //         this.activeName = '3'
            //     } else {
            //         this.activeName = '4'
            //     }
            // },
            // deep: true
        // }
    },
    mounted: function() {
        this.getImportProjectInfo('', '')
        this.getAllTableData('', '')
        this.getDevopsTable('', '')
    }
    
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    #projectimported{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .flexBox{
        display: flex;
        flex-wrap: nowrap;
    }
    .flexEl{
        margin: auto;
        flex: 1;
    }
    .el{
        width: 10%;
        flex: 0 0 10%;
    }
    .marT{
        margin-top: 20px;
    }
</style>
